<template>
	<view class="">
		<view class="video_box " v-for="(item, index) of videoList" :key="item.id">
			<video
				id="myVideo"
				v-if="item.url && item.img_path"
				:src="item.url"
				controls
				:custom-cache="false"
				:poster="item.img_path"
				:title="item.title"
				:show-mute-btn="true"
				:muted="true"
				object-fit="fill"
				@play="videoPlay(item, index)"
			>
				<view v-if="item.title" class="tit_bg">
					<view class="h4 text-white lh_48" v-if="item.title">{{ item.title }}</view>
				</view>
			</video>
			<view class="video_time c_9 font_24 my-2">
				<text>{{ item.company }}</text>
				<text>{{ timeDate(item.add_time) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/js/util.js';
export default {
	props: ['list'],
	data() {
		return {
			videoList: []
		};
	},
	watch: {
		videoList: {
			handler(newV, oldV) {
				this.videoList = newV;
			},
			deep: true
		}
	},
	created() {
		this.videoList = this.list;
	},
	computed: {
		timeDate() {
			return function(val) {
				return util.getDateBeforeNow(util.happenTimeFun(val));
			};
		}
	},
	methods: {
		videoPlay(val, idx) {
			this.$set(this.videoList[idx], 'title', false);
			this.$emit('videoPlay', val.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.video_box {
	width: 100%;
	position: relative;
	video {
		width: 100%;
		height: 395rpx;
		border-radius: 20rpx;
	}
	.video_time {
		text:first-child {
			margin-right: 30rpx;
		}
	}
	.tit_bg {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 500;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		padding: 10rpx 20rpx;
	}
}
</style>
